<template>
  <div class="newclassStudentContainer">
    <div
      class="dialog animated"
      :class="open? 'fadeIn':'fadeOut'"
      v-show="show"
      :style="{visibility: (visible?'visible':'hidden')}"
    >
      <div class="panel animated" :class="open? 'zoomIn':''">
        <div class="title">
          班级学员
          <div class="close" @click="cancel()"></div>
        </div>
        <div>上课时间：{{startTime}}</div>
        <div>
          <table class="table" cellspacing="0" style="margin-top:0.2rem;">
            <thead class="thead">
              <tr>
                <td style="width: 6rem;">学员</td>
                <td style="width: 6rem;">联系电话</td>
                <td style="width: 2rem;">年龄</td>
                <td style="width: 6rem;">约课日期</td>
                <td style="width: 2rem;">操作</td>
              </tr>
            </thead>
            <div class="studentTitle">班级学员</div>
            <tbody class="tbody" v-if="studentList.length>0">
              <tr v-for="item in studentList" :key="item.studentUserId">
                <td>
                  <div style="display: flex;justify-content: center;align-items: center;">
                    <div>{{item.realName}}</div>
                    <div v-if="item.type == 2" class="name_img_mem"></div>
                    <div v-else class="name_img_cand"></div>
                  </div>
                </td>
                <td>{{item.parentData[0].phone}}</td>
                <td v-if="item.age == 0"></td>
                <td v-else>{{item.age}}岁</td>
                <td>{{item.createTime}}</td>
                <td>
                  <span
                    class="operate_btn"
                    @click="leave(item)"
                    v-if="isHasLeave && !isFromFileClass"
                  >请假</span>
                </td>
              </tr>
            </tbody>
            <tbody v-else>
              <tr>
                <td colspan="11" align="center">暂无数据</td>
              </tr>
            </tbody>
            <div class="studentTitle">候选区学员</div>
            <tbody class="tbody" v-if="candidateStudentList.length>0">
              <tr v-for="item in candidateStudentList" :key="item.studentUserId">
                <td>
                  <div style="display: flex;justify-content: center;align-items: center;">
                    <div>{{item.realName}}</div>
                    <div v-if="item.type == 2" class="name_img_mem"></div>
                    <div v-else class="name_img_cand"></div>
                  </div>
                </td>
                <td>{{item.parentData[0].phone}}</td>
                <td>{{item.age}}岁</td>
                <td>{{item.createTime}}</td>
                <td></td>
              </tr>
            </tbody>
            <tbody v-else>
              <tr>
                <td colspan="11" align="center">暂无数据</td>
              </tr>
            </tbody>
            <div class="studentTitle">请假学员</div>
            <tbody class="tbody" v-if="leaveStudentList.length>0">
              <tr v-for="item in leaveStudentList" :key="item.studentUserId">
                <td>
                  <div style="display: flex;justify-content: center;align-items: center;">
                    <div>{{item.realName}}</div>
                    <div v-if="item.type == 2" class="name_img_mem"></div>
                    <div v-else class="name_img_cand"></div>
                  </div>
                </td>
                <td>{{item.parentData[0].phone}}</td>
                <td>{{item.age}}岁</td>
                <td>{{item.createTime}}</td>
                <td></td>
              </tr>
            </tbody>
            <tbody v-else>
              <tr>
                <td colspan="11" align="center">暂无数据</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <el-dialog
      :title="currentLeaveStudent.realName"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="30%"
      top="14%"
    >
      <div style="color:#999999;">联系电话：{{currentLeaveStudent.phone}}</div>
      <div style="color:#666666;margin-top:0.2rem;">该学员确定请假吗？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="studentLeave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      isAdd: false,
      startTime: "",
      isHasLeave: false,
      dialogVisible: false,
      currentLeaveStudent: {
        clueId: "",
        phone: "",
        realName: ""
      },
      syllabusId: "",
      studentList: [], //会员列表
      isFromFileClass: false,
      candidateStudentList: [], //候选列表
      leaveStudentList: [] //请假列表
    };
  },
  methods: {
    init: function(data) {
      var vm = this;
      this.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
      this.startTime = data.startTime;
      this.isHasLeave = data.isHasLeave;
      this.syllabusId = data.syllabusId;
      vm.isFromFileClass = data.isFromFileClass ? data.isFromFileClass : false;
      this.initData(data.syllabusId);
    },
    studentLeave() {
      var vm = this;
      let paras = [
        {
          clueId: vm.currentLeaveStudent.clueId,
          classSyllabusId: vm.syllabusId,
          status: 3
        }
      ];
      api.signStudent(paras).then(function(data) {
        if (data.resultCode == 2000) {
          vm.$message({
            message: "请假成功",
            type: "success"
          });
          vm.dialogVisible = false;
          vm.initData(vm.syllabusId);
        } else {
          vm.$message({
            message: data.message,
            type: "warning"
          });
        }
      });
    },
    /**请假 */
    leave(item) {
      var vm = this;
      vm.currentLeaveStudent = {
        clueId: item.clueId,
        phone: item.parentData[0].phone,
        realName: item.realName
      };
      vm.dialogVisible = true;
    },
    initData(syllabusId) {
      var vm = this;
      vm.studentList = [];
      vm.candidateStudentList = [];
      vm.leaveStudentList = [];
      api
        .getstudentBySyllabusId({ syllabusId: syllabusId })
        .then(function(data) {
          if (data.resultCode == 2000) {
            if (data.info != null) {
              vm.studentList = data.info.studentList;
              vm.candidateStudentList = data.info.candidateStudentList;
              vm.leaveStudentList = data.info.leaveStudentList;
            }
          } else {
            vm.$message({
              message: data.message,
              type: "warning"
            });
          }
        });
    },
    cancel: function() {
      var vm = this;
      //隐藏弹窗
      vm.open = false;
      vm.$emit("callback", "添加成功");
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
      }, 500);
    }
  },
  created: function() {}
};
</script>
<style lang="scss">
.newclassStudentContainer {
  .operate_btn {
    font-size: 0.16rem;
    color: #2e83f6;
    cursor: pointer;
    user-select: none;
  }
  .name_img_mem {
    margin-left: 0.04rem;
    width: 0.42rem;
    height: 0.2rem;
    background-image: url(~@keer/assets/img/education_manage/mem.png);
  }
  .name_img_cand {
    margin-left: 0.04rem;
    width: 0.42rem;
    height: 0.2rem;
    background-image: url(~@keer/assets/img/education_manage/cand.png);
  }
  .studentTitle {
    font-size: 0.14rem;
    width: 100%;
    padding-left: 1.2rem;
    color: #999999;
    margin-top: 0.16rem;
    margin-bottom: 0.16rem;
  }
  .el-dialog__body {
    padding: 0.1rem 0.2rem 0.3rem 0.6rem;
    color: #606266;
    font-size: 0.16rem;

    word-break: break-all;
  }
  .el-dialog__title {
    padding-left: 0.4rem;
    line-height: 0.24rem;
    font-size: 0.18rem;
    color: #303133;
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped src="@/style/module/dialog.css"></style>

